<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">交易密码</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--登录密码start-->
		<view class="improve">
			<view class="code_form">
				<view class="t_input">
					<label>设置交易密码</label>
					<u-input type="number" :password="showPassword" name="password" value="123456" placeholderStyle="color: #C9CACA"></u-input>
					<view class="eye" :class="[showPassword==true?'':'on']" @click="ShowPwd"></view>
				</view>
				<view class="t_input">
					<label>再次输入确认</label>
					<u-input type="number" :password="showPassword01" name="password" value="123456" placeholderStyle="color: #C9CACA"></u-input>
					<view class="eye" :class="[showPassword01==true?'':'on']" @click="ShowPwd01"></view>
				</view>
				<view class="tips">交易密码为 6 位纯数字</view>
			</view>
			<view class="yanz_form">
				<view class="tels"><text>短信验证</text>138*****899</view>
				<view class="input_code">
					<u-input placeholder="输入验证码" placeholderStyle="color: #C9CACA" v-model="cusname"  @focus="keyboard_show = true"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode">{{tips}}</u-button>	
				</view>	
			</view>
		</view>
		<!--登录密码end-->
		
		<!--键盘start-->
		<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show" :closeOnClickOverlay="true" @close="key_close"></u-keyboard>
		<!--键盘end-->
		
		<!--底部start-->
		<view class="f_btn">
			<button class="submit on">确定</button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
		
		<u-safe-bottom></u-safe-bottom>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showPassword: true,
				showPassword01: true,
				tips: '',
				// refCode: null,
				seconds: 60,
				keyboard_show: false,
				tooltip:false,
				cusname:''
			}
		},
		methods:{
			ShowPwd(){
				this.showPassword = !this.showPassword
			},
			ShowPwd01(){
				this.showPassword01 = !this.showPassword01
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			valChange(val) {
				this.cusname += val;
			},
			backspace(){
				if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
			},
			key_close(){
				this.keyboard_show =false
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("../member/member.scss");
	@import url("my.scss");
</style>